<template>
  <l-layout style="background: #f1f2f5" :left="240">
    <template #left>
      <l-panel title="常用按钮" style="padding: 8px 0 0 0">
        <el-tree
          @check="handleCheck"
          default-expand-all
          show-checkbox
          ref="tree"
          node-key="id"
          :highlight-current="true"
          :data="myTreeData"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            {{ node.label }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-panel style="padding: 8px 0 0 4px">
      <!--<template #toolRight >
                <el-button-group>
                    <el-button @click="handleAddBtn" size="mini" type="primary" icon="el-icon-plus"  >新增按钮</el-button>
                </el-button-group>
            </template>-->
      <l-table
        style="height: 50%"
        :dataSource="config.btns"
        :columns="columns"
        :isSortable="true"
        rowKey="id"
        :isShowNum="false"
      >
        <template v-slot:label="scope">
          <el-input
            v-if="!['Add', 'Import', 'Export', 'Edit', 'Delete', 'Details', 'Tabs'].includes(scope.row.id)"
            size="mini"
            v-model="scope.row.label"
          ></el-input>
        </template>
        <template v-slot:prop="scope">
          <el-input
            v-if="!['Add', 'Import', 'Export', 'Edit', 'Delete', 'Details', 'Tabs'].includes(scope.row.id)"
            size="mini"
            v-model="scope.row.prop"
          ></el-input>
        </template>
        <template v-slot:isRowBtn="scope">
          <el-switch
            size="mini"
            v-model="scope.row.isRowBtn"
            :disabled="['Add', 'Import', 'Export', 'Edit', 'Delete', 'Details', 'Tabs'].includes(scope.row.id)"
          >
          </el-switch>
        </template>
        <template v-slot:isWFlow="scope">
          <el-switch size="mini" v-model="scope.row.isWFlow" v-if="['Add'].includes(scope.row.id)"> </el-switch>
        </template>

        <template v-slot:wFlowCode="scope">
          <l-select size="mini" v-model="scope.row.wFlowCode" v-if="['Add'].includes(scope.row.id)" :options="wflist">
          </l-select>
        </template>
        <!--<template v-slot:notHtml="scope">
                    <el-switch size="mini"  v-model="scope.row.notHtml" :disabled="['Add','Edit','Delete'].includes(scope.row.id)" >
                    </el-switch>
                </template>-->
        <template v-slot:icon="scope">
          <l-input-icon
            v-if="!scope.row.isRowBtn && scope.row.id != 'Tabs'"
            size="mini"
            :iconList="lr_icons"
            v-model="scope.row.icon"
          >
          </l-input-icon>
        </template>
      </l-table>

      <l-edit-table
        style="margin: 12px 0"
        v-if="tabsShow"
        addBtnText="添加"
        :dataSource="tabsData"
        @addRow="showTabsForm"
        :columns="tabsColumns"
        @deleteRow="tabsDelete"
      >
        <template v-slot:f_RequestMethod="scope">
          <el-tag type="success">{{ scope.row.f_RequestMethod }}</el-tag>
        </template>
        <template v-slot:apiType="scope">
          <el-tag type="success">{{ getApiType(scope.row.apiType) }}</el-tag>
        </template>
      </l-edit-table>
      <div v-if="tabsShow" style="margin: 0 12px">
        <label>设置默认值：</label>
        <el-radio-group v-model="tabsRow.default">
          <el-radio v-for="tab in tabsData" :key="tab.label" :label="tab.label">{{ tab.label }}</el-radio>
        </el-radio-group>
      </div>
    </l-panel>
    <!--对话框-->
    <l-dialog
      title="添加Tab"
      :visible.sync="tabsDialog"
      :width="400"
      :height="200"
      @closed="hideTabsForm"
      @ok="tabsSave"
    >
      <el-form ref="form" style="width: 360px; padding: 20px" :model="tabsForm" size="mini" label-width="80px">
        <el-form-item label="按钮名称">
          <el-input v-model="tabsForm.label"></el-input>
        </el-form-item>
        <el-form-item label="参数名">
          <el-input v-model="tabsForm.paramName"></el-input>
        </el-form-item>
        <el-form-item label="参数值">
          <el-input v-model="tabsForm.paramValue"></el-input>
        </el-form-item>
      </el-form>
    </l-dialog>
    <!--对话框 end-->
  </l-layout>
</template>
<script>
const api = window.$api.workflow.scheme;
export default {
  name: "webcode-btns",
  inject: ["formConfig"],
  components: {},
  props: {
    formType: Number,
  },
  computed: {
    config() {
      return this.formConfig;
    },
    myTreeData() {
      if (this.formType == 1) {
        // 视图表单
        return this.treeData.filter((t) => ["Import", "Export", "Details"].includes(t.id));
      } else {
        return this.treeData;
      }
    },
    tabsShow() {
      return this.config.btns.findIndex((item) => item.prop == "Tabs") > -1;
    },
    tabsData() {
      const tabs = this.config.btns.find((item) => item.prop == "Tabs");
      if (tabs) {
        return tabs.btns;
      } else {
        return [];
      }
    },
    tabsRow() {
      const tabs = this.config.btns.find((item) => item.prop == "Tabs");
      if (tabs) {
        return tabs;
      } else {
        return {};
      }
    },
  },
  data() {
    return {
      columns: [
        { label: "名称", prop: "label", minWidth: "150" },
        { label: "ID", prop: "prop", minWidth: "120" },
        { label: "行按钮", prop: "isRowBtn", width: "80", align: "center" },
        { label: "创建流程", prop: "isWFlow", width: "80", align: "center" },
        { label: "流程模版", prop: "wFlowCode", width: "240" },
        { label: "图标", prop: "icon", width: "240" },
      ],
      treeData: [
        { label: "新增", id: "Add", prop: "Add", icon: "el-icon-plus", isRowBtn: false },
        // { label: "导入", id: "Import", prop: "Import", icon: "el-icon-upload2", isRowBtn: false },
        { label: "导出", id: "Export", prop: "Export", icon: "el-icon-download", isRowBtn: false },
        { label: "编辑", id: "Edit", prop: "Edit", isRowBtn: true },
        { label: "删除", id: "Delete", prop: "Delete", isRowBtn: true },
        { label: "详情", id: "Details", prop: "Details", isRowBtn: true },
        { label: "菜单条", id: "Tabs", prop: "Tabs", isRowBtn: false, btns: [], default: "" },
      ],
      tabsColumns: [
        { label: "名称", prop: "label", minWidth: "150" },
        { label: "参数名", prop: "paramName", minWidth: "150" },
        { label: "参数值", prop: "paramValue", minWidth: "150" },
      ],
      tabsDialog: false,
      tabsForm: {},
    };
  },
  asyncComputed: {
    wflist: {
      async get() {
        const data = await this.$awaitWraper(api.getList());
        const res = data || [];
        return res.map((t) => {
          return { label: t.f_Name, value: t.f_Code };
        });
      },
    },
  },
  created() {},
  methods: {
    tabsSave() {
      const tabsForm = this.$deepClone(this.tabsForm);
      this.tabsData.push(tabsForm);
      this.hideTabsForm();
    },
    tabsDelete({ index }) {
      this.tabsData.splice(index, 1);
    },
    hideTabsForm() {
      this.tabsDialog = false;
    },
    showTabsForm() {
      this.tabsForm = {};
      this.tabsDialog = true;
    },
    handleAddBtn() {
      this.config.btns.push({ id: this.$uuid(), label: "", prop: "", icon: "", isRowBtn: false, notHtml: false });
    },
    handleRemove(index) {
      this.config.btns.splice(index, 1);
    },
    handleCheck($node, data) {
      const addCols = data.checkedNodes.filter((t) => this.config.btns.findIndex((t2) => t2.id == t.id) == -1);
      const removeCols = this.config.btns.filter((t) => data.checkedNodes.findIndex((t2) => t2.id == t.id) == -1);

      if (removeCols.length > 0) {
        this.config.btns = this.config.btns.filter((t) => removeCols.findIndex((t2) => t2.id == t.id) == -1);
      }

      if (addCols.length > 0) {
        this.config.btns.push(...addCols);
      }
    },
    setCheckedKeys(keys) {
      this.$refs.tree.setCheckedKeys(keys);
    },
  },
};
</script>
